<template>
	<view class="container">
		<view class="carousel">
			<!-- 图片选择器  轮询滑动图片 -->
			<swiper indicator-dots circular="true" duration="400">
				<swiper-item class="swiper-item"  v-for="imgItem in manyImgList">
					<view class="image-wrapper">
						<image :src="imgItem" class="loaded" mode="aspectFill">
						</image>
					</view>
				</swiper-item>
			</swiper>
			
		</view>

		<view class="introduce-section">
			<text class="title">{{ goods.name }}</text>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{ goods.price }}</text>
				<!-- <text class="m-price">¥488</text>
				<text class="coupon-tip">7折</text> -->
			</view>
			<view class="bot-row">
				<text>发布时间: {{ goods.createTime}}</text>
				<text>收藏数量: {{ this.colectionNum=goods.likes }}</text>
			</view>
		</view>

		<view class="c-list">
			<view class="c-row b-b">
				<text class="tit">商品描述</text>
				<view class="bz-list con">
					<text>{{ goods.state }}</text>
				</view>
				<view class="bz-list con" style="color: #ED1C24;">
					<text v-show="goods.status==1">已售出</text>
					<text v-show="goods.status==0" style="color: #09BB07;">在售</text>
				</view>
			</view>
		</view>

		<!-- 留言 -->
		<view class="eva-section">
			<view class="e-header">
				<text class="tit">评论</text>
				<text>({{ leavingMsgNum }})</text>
				<!-- isReplyShow代表浏览用户是不是卖家用户，如果是为true，否则为false -->
				<text v-show="!isReplyShow" class="tip" @click="review" style="color: #007AFF;">评论</text>
				<text class="yticon icon-you"></text>
			</view>
			<view class="eva-box" v-for="(item, index) in leavingMsgList">
				<!-- 头像 -->
				<image class="portrait" :src="item.user.headImg" mode="aspectFill"></image>
				<view class="right">
					<!-- <text class="name">{{ item.from.ownerName }}</text> 原模板：得到评论者的姓名，但是不知道这个from是啥意思？？？？行吧 from就是另外一个对象数据，我们这里使用了user对象-->
					<text class="name">{{ item.user.name }}</text>
					<text class="name">留言时间：{{ item.createTime  }}</text>
					<text class="con">{{ item.content }}</text>
					<text v-show="isReplyShow && item.reply == null" class="tip" @click="reply(item)" style="color: #007AFF;">回复</text>
					<view class="bot">
						<text class="attr" v-show="item.reply != null" style="color: #ffaa00;">卖家：</text>
						<text class="time" style="color: #ffaa00 ;">{{ item.reply }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>首页</text>
			</navigator>
			<view class="p-b-btn" :class="{ active: favorite }" @click="toFavorite">
				<text class="yticon icon-shoucang"></text>
				<text>收藏</text>
				
			</view>

			<view class="action-btn-group">
				
				<button :disabled="goods.status == 1" type="primary" v-show="!this.isReplyShow" class=" action-btn no-border buy-now-btn" @click="createGoodsOrder">立即购买</button>
			</view>
		</view>
		<ygc-comment ref="review" :placeholder="'评论'" @pubComment="reviewText"></ygc-comment>
		<ygc-comment ref="reply" :placeholder="'回复'" @pubComment="replyText"></ygc-comment>
		
	</view>
</template>

<script>
import share from '@/components/share';
import ygcComment from '@/components/ygc-comment/ygc-comment.vue';

export default {
	components: {
		share,
		ygcComment
	},
	data() {
		return {
			publisherId: '',//这个是路径中的参数  创建这个商品的用户
			isReplyShow: true, //是否显示回复或者回复，如果是卖家可以回复，买家可以评论
			goodsId: '', //这个是路径中的参数  商品id
			specClass: 'none',
			specSelected: [],
			favorite: false,
			goods: {},
			imgList: [
				{
					src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
				},
			],
			manyImgList:[],
			leavingMsgList: [],
			leavingMsgNum: 0,
			replyItem: {},
			clickCollectionNum: 0, //点击收藏的次数,
			colectionNum: 0  //被收藏数
		};
	},
	//这个onLoad就是进入这个详情页面的时候就开始加载已下的内容
	// 这个是获取路径url中的参数
	onLoad(options) {
		//获取商品发布人和商品信息
		this.goodsId = options.goodsId;
		this.publisherId = options.publisherId;
		//加载数据到商品goods里面
		this.getData(this.goodsId);
		//加载图片详情到显示区
		this.getManyImgDetails(this.goodsId);
		//判断此用户能否回复或者评论（取决于发布人和登录用户是不是同一个人）  这个很有用啊 是则为true，不是同一个就是false
		this.isReplyShow = this.$store.state.userInfo.id == this.publisherId;
		
		// this.isReplyShow=true;
		//加载留言数据
		this.getLeavingMsgData();
		//加载收藏数量
		// this.getCollectionNum();
		//加载收藏状态
		this.getFavouriteStatus();
	},
	methods: {
		//加载留言回复的数据
		getLeavingMsgData() {
			uni.request({
				url: this.baseurl+'pro/commentList/' + this.goodsId,
				method: 'GET',
				success: res => {
					this.leavingMsgList = res.data.data;
					this.leavingMsgNum = this.leavingMsgList.length;
				}
			});
		},
		//得到商品详情的图片
		getManyImgDetails(goodsId){
			uni.request({
				url:this.baseurl+'pro/selectManyImg/'+goodsId,
				method:'GET',
				success: res => {
					console.log(res.data.data)
					if(res.data.code==200){
						this.manyImgList=res.data.data;
						console.log(this.manyImgList);
						// this.imgList.push(this.manyImgList);
						// console.log(this.imgList);
						
					}else{
						this.$api.msg("加载图片信息错误");
					}
				}
			});
		},
		
		
		//获取是否收藏的状态
		getFavouriteStatus() {
			// alert("111")
			uni.request({
				url: this.baseurl+'pro/isFavorite',
				method:'GET',
				data: {
					productSn: this.goodsId,
					userSn: this.$store.state.userInfo.id		//this.$store.state.userInfo.ownerId     由于还没有做登录的限制，所以我们暂时使用假数据验证
				},
				success: res => {
					// console.log(res);
					if (res.data.code == 200) {
						this.favorite = res.data.data;
					} else {
						this.favorite = false;//未选中
					}
				}
			});
		},
		//发送请求，加载商品数据
		getData(goodsId) {
			uni.request({
				url: this.baseurl+'pro/detailProduct/' + goodsId,
				method: 'GET',
				success: res => {
					this.goods = res.data;
					//图片展示目前只有一张，就只填充原来的图片列表的第一个
					this.imgList.push(this.goods.pic);
					// console.log(this.imgList)
				}
			});
		},
		//获取收藏数量的方法  不用了  我直接在上面收藏信息那里赋值给colectionNum
		// getCollectionNum() {
		// 	uni.request({
		// 		url: this.baseurl + '/collect/totalNum/' + this.goodsId,
		// 		success: res => {
		// 			this.colectionNum = res.data.data;
		// 		}
		// 	});
		// },
		
		
		//留言
		review() {
			//需注意：在测试过程中，我把所有需要登陆才能操作的  我都取消了的  以下
			// if (this.$store.state.userInfo.ownerId) {
				// console.log(this.$store.state.userInfo.ownerId);
				this.$refs.review.toggleMask('show');
			// } else {
			// 	uni.navigateTo({
			// 		url: '../public/login-name'
			// 	});
			// }
		},
		reply(item) {
			//需注意：在测试过程中，我把所有需要登陆才能操作的  我都取消了的 以下
			// if (this.$store.state.userInfo.ownerId) {
				this.replyItem = item;
				this.$refs.reply.toggleMask('show');
			// } else {
			// 	url: '../public/login-name';
			// }
		},
		reviewText(text) {
			 // console.log(text);
			 // console.log(this.goodsId);
			uni.showToast({
				icon: 'success',
				title: '评论成功',
				duration: 1000,
				success: () => {
					//发送post请求添加留言
					uni.request({
						url: this.baseurl+'pro/addComment',
						method: 'post',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							userSn: this.$store.state.userInfo.id, //   this.$store.state.userInfo.ownerId 这个是获得当前登录者编号 以后登录了之后再写   评论来自谁
							// leavingMsgTo: this.goods.creatorSn,  //评论给卖家  由于我的数据库没有卖家，只有商品编号，所以这一栏先注释掉
							content: text,
							// parentId: 0,
							productSn: this.goodsId
						},
						success: res => {
							//添加成功后刷新页面，并关闭遮罩层
							this.getLeavingMsgData();
							this.$refs.review.toggleMask('close');
						}
					});
				}
			});
		},
		replyText(text) {
			// console.log(text);
			uni.showToast({
				icon: 'success',
				title: '回复成功',
				duration: 1000,
				success: () => {
					//发送post请求添加回复
					uni.request({
						url: this.baseurl+'pro/addReply',
						method: 'post',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							// leavingMsgFrom: this.$store.state.userInfo.ownerId,
							// leavingMsgTo: this.replyItem.from.ownerId,
							// leavingMsgDetail: text,
							// parentId: this.replyItem.leavingMsgId,
							// goodsid: this.goodsId
							cid: this.replyItem.cid,//这条评论的id
							reply: text //回复内容
						},
						success: res => {
							//添加成功后刷新页面，并关闭遮罩层
							this.getLeavingMsgData();
							this.$refs.reply.toggleMask('close');
						}
					});
				}
			});
		},
		//规格弹窗开关
		toggleSpec() {
			if (this.specClass === 'show') {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			} else if (this.specClass === 'none') {
				this.specClass = 'show';
			}
		},
		//选择规格
		selectSpec(index, pid) {
			let list = this.specChildList;
			list.forEach(item => {
				if (item.pid === pid) {
					this.$set(item, 'selected', false);
				}
			});

			this.$set(list[index], 'selected', true);
			//存储已选择
			/**
			 * 修复选择规格存储错误
			 * 将这几行代码替换即可
			 * 选择的规格存放在specSelected中
			 */
			this.specSelected = [];
			list.forEach(item => {
				if (item.selected === true) {
					this.specSelected.push(item);
				}
			});
		},
		//分享
		share() {
			this.$refs.share.toggleMask();
		},
		//收藏
		toFavorite() {
			//需要登陆的全部取消了  以后需要加上  因为还没做到登录这里
			// if (this.$store.state.userInfo.ownerId) {
				this.clickCollectionNum++;
				if (this.clickCollectionNum <= 10) {
					//点击收藏过后，改变收藏按钮的状态
					this.favorite = !this.favorite;
					//发送请求添加到收藏，成功后给提示
					if (this.favorite) {
						//添加到收藏
						uni.request({
							url: this.baseurl+'pro/addFavorite',
							method: 'POST',
							data: {
								productSn: this.goodsId,
								userSn: this.$store.state.userInfo.id   //this.$store.state.userInfo.ownerId     由于还没有做登录的限制，所以我们暂时使用假数据验证
							},
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							success: res => {
								console.log(res);
								if (res.data == 200) {
									uni.showToast({
										icon: 'success',
										title: res.data
									});
									this.colectionNum++;
									//重新载入，刷新页面
									this.getData(this.goodsId);
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data
									});
								}
							}
						});
					} else {
						//删除收藏
						uni.request({
							url: this.baseurl+'pro/noFavorite' ,
							method: 'DELETE',
							data: {
									productSn: this.goodsId,
									userSn: this.$store.state.userInfo.id   //this.$store.state.userInfo.ownerId     由于还没有做登录的限制，所以我们暂时使用假数据验证
								},
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							success: res => {
								console.log(res);
								if (res.data == 200) {
									uni.showToast({
										icon: 'success',
										title: res.data
									});
									this.colectionNum--;
									//重新载入，刷新页面
									this.getData(this.goodsId);
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data
									});
								}
							}
						});
					}
				} else {
					uni.showToast({
						icon: 'loading',
						title: '操作过于频繁，请稍后再试'
					});
				}
			// } else {
			// 	uni.navigateTo({
			// 		url: '../public/login-name'
			// 	});
			// }
		},
		//创建二手商品订单
		createGoodsOrder() {
			//需要登陆的全部取消了  以后需要加上  因为还没做到登录这里
			if (this.$store.state.userInfo.id) {
				uni.navigateTo({
					url: '../order/createGoodsOrder?goodsId=' + this.goodsId
				});
			} else {
				uni.navigateTo({
					url: '../public/login-name'
				});
			}
		},
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-bottom: 160upx;
}
.icon-you {
	font-size: $font-base + 2upx;
	color: #888;
}
.carousel {
	height: 722upx;
	position: relative;
	swiper {
		height: 100%;
	}
	.image-wrapper {
		width: 100%;
		height: 100%;
	}
	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750upx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

/* 标题简介 */
.introduce-section {
	background: #fff;
	padding: 20upx 30upx;

	.title {
		font-size: 32upx;
		color: $font-color-dark;
		height: 50upx;
		line-height: 50upx;
	}
	.price-box {
		display: flex;
		align-items: baseline;
		height: 64upx;
		padding: 10upx 0;
		font-size: 26upx;
		color: $uni-color-primary;
	}
	.price {
		font-size: $font-lg + 2upx;
	}
	.m-price {
		margin: 0 12upx;
		color: $font-color-light;
		text-decoration: line-through;
	}
	.coupon-tip {
		align-items: center;
		padding: 4upx 10upx;
		background: $uni-color-primary;
		font-size: $font-sm;
		color: #fff;
		border-radius: 6upx;
		line-height: 1;
		transform: translateY(-4upx);
	}
	.bot-row {
		display: flex;
		align-items: center;
		height: 50upx;
		font-size: $font-sm;
		color: $font-color-light;
		text {
			flex: 1;
		}
	}
}
/* 分享 */
.share-section {
	display: flex;
	align-items: center;
	color: $font-color-base;
	background: linear-gradient(left, #fdf5f6, #fbebf6);
	padding: 12upx 30upx;
	.share-icon {
		display: flex;
		align-items: center;
		width: 70upx;
		height: 30upx;
		line-height: 1;
		border: 1px solid $uni-color-primary;
		border-radius: 4upx;
		position: relative;
		overflow: hidden;
		font-size: 22upx;
		color: $uni-color-primary;
		&:after {
			content: '';
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			left: -20upx;
			top: -12upx;
			position: absolute;
			background: $uni-color-primary;
		}
	}
	.icon-xingxing {
		position: relative;
		z-index: 1;
		font-size: 24upx;
		margin-left: 2upx;
		margin-right: 10upx;
		color: #fff;
		line-height: 1;
	}
	.tit {
		font-size: $font-base;
		margin-left: 10upx;
	}
	.icon-bangzhu1 {
		padding: 10upx;
		font-size: 30upx;
		line-height: 1;
	}
	.share-btn {
		flex: 1;
		text-align: right;
		font-size: $font-sm;
		color: $uni-color-primary;
	}
	.icon-you {
		font-size: $font-sm;
		margin-left: 4upx;
		color: $uni-color-primary;
	}
}

.c-list {
	font-size: $font-sm + 2upx;
	color: $font-color-base;
	background: #fff;
	.c-row {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		position: relative;
	}
	.tit {
		width: 140upx;
	}
	.con {
		flex: 1;
		color: $font-color-dark;
		.selected-text {
			margin-right: 10upx;
		}
	}
	.bz-list {
		height: 40upx;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		text {
			display: inline-block;
			margin-right: 30upx;
		}
	}
	.con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: $font-color-dark;
		line-height: 40upx;
	}
	.red {
		color: $uni-color-primary;
	}
}

/* 评价 */
.eva-section {
	display: flex;
	flex-direction: column;
	padding: 20upx 30upx;
	background: #fff;
	margin-top: 16upx;
	.e-header {
		display: flex;
		align-items: center;
		height: 70upx;
		font-size: $font-sm + 2upx;
		color: $font-color-light;
		.tit {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right: 4upx;
		}
		.tip {
			flex: 1;
			text-align: right;
		}
		.icon-you {
			margin-left: 10upx;
		}
	}
}
.eva-box {
	display: flex;
	padding: 20upx 0;
	.portrait {
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		border-radius: 100px;
	}
	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-base;
		color: $font-color-base;
		padding-left: 26upx;
		.con {
			font-size: $font-base;
			color: $font-color-dark;
			padding: 20upx 0;
		}
		.bot {
			display: flex;
			// justify-content: space-between;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
}
/*  详情 */
.detail-desc {
	background: #fff;
	margin-top: 16upx;
	.d-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		position: relative;

		text {
			padding: 0 20upx;
			background: #fff;
			position: relative;
			z-index: 1;
		}
		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300upx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
}

/* 规格选择弹窗 */
.attr-content {
	padding: 10upx 30upx;
	.a-t {
		display: flex;
		image {
			width: 170upx;
			height: 170upx;
			flex-shrink: 0;
			margin-top: -40upx;
			border-radius: 8upx;
		}
		.right {
			display: flex;
			flex-direction: column;
			padding-left: 24upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
			line-height: 42upx;
			.price {
				font-size: $font-lg;
				color: $uni-color-primary;
				margin-bottom: 10upx;
			}
			.selected-text {
				margin-right: 10upx;
			}
		}
	}
	.attr-list {
		display: flex;
		flex-direction: column;
		font-size: $font-base + 2upx;
		color: $font-color-base;
		padding-top: 30upx;
		padding-left: 10upx;
	}
	.item-list {
		padding: 20upx 0 0;
		display: flex;
		flex-wrap: wrap;
		text {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			margin-right: 20upx;
			margin-bottom: 20upx;
			border-radius: 100upx;
			min-width: 60upx;
			height: 60upx;
			padding: 0 20upx;
			font-size: $font-base;
			color: $font-color-dark;
		}
		.selected {
			background: #fbebee;
			color: $uni-color-primary;
		}
	}
}

/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;

	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		.mask {
			animation: hidePopup 0.2s linear both;
		}
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		min-height: 40vh;
		border-radius: 10upx 10upx 0 0;
		background-color: #fff;
		.btn {
			height: 66upx;
			line-height: 66upx;
			border-radius: 100upx;
			background: $uni-color-primary;
			font-size: $font-base + 2upx;
			color: #fff;
			margin: 30upx auto 20upx;
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}
		100% {
			transform: translateY(0%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(120%);
		}
	}
}

/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	left: 85upx;
	bottom: 0upx;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 600upx;
	height: 100upx;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);//透明的
	border-radius: 30upx;

	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-sm;
		color: $font-color-base;
		width: 200upx;
		height: 80upx;
		.yticon {
			font-size: 40upx;
			line-height: 48upx;
			color: $font-color-light;
		}
		&.active,
		&.active .yticon {
			color: $uni-color-primary;
		}
		.icon-fenxiang2 {
			font-size: 42upx;
			transform: translateY(-2upx);
		}
		.icon-shoucang {
			font-size: 46upx;
		}
	}
	.action-btn-group {
		display: flex;
		height: 76upx;
		border-radius: 100px;
		overflow: hidden;
		box-shadow: 0 20upx 40upx -16upx #fa436a;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
		margin-left: 20upx;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28upx;
			width: 0;
			border-right: 1px solid rgba(255, 255, 255, 0.5);
		}
		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 180upx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 10px;
			background: transparent;
		}
	}
}
</style>
